<template>
  <div>
    <div class="page-header">
      <h2 style="margin-top: 0">评委管理与推荐</h2>
      <p class="description">管理各评审活动和专业组的评委信息</p>
    </div>

    <!-- 评审活动选择 -->
    <div class="filter-bar" style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
      <el-select
          v-model="selectedActivity"
          placeholder="请选择评审活动"
          style="width: 300px;"
          @change="handleActivityChange"
      >
        <el-option
            v-for="activity in reviewActivities"
            :key="activity.id"
            :label="activity.name"
            :value="activity.id"
            :disabled="activity.disabled"
        ></el-option>
      </el-select>
    </div>

    <div class="card-container">
      <!-- 专业组选项卡 -->
      <el-tabs v-model="activeTab" type="card" style="margin-bottom: 15px;" @tab-click="handleTabClick">
        <el-tab-pane label="油气勘探" name="油气勘探"></el-tab-pane>
        <el-tab-pane label="油气藏工程" name="油气藏工程"></el-tab-pane>
        <el-tab-pane label="钻采与地面工程" name="钻采与地面工程"></el-tab-pane>
        <el-tab-pane label="信息工程" name="信息工程"></el-tab-pane>
      </el-tabs>

      <!-- 操作按钮组 -->
      <div class="action-buttons" :class="{ 'disabled-buttons': isCurrentTabConfirmed }">
        <el-button
            type="primary"
            icon="el-icon-random"
            @click="openRecommendDialog"
            :disabled="!selectedActivity || isCurrentTabConfirmed"
        >
          评委推荐
        </el-button>
        <el-button
            type="success"
            icon="el-icon-plus"
            @click="manualAddJudge"
            :disabled="!selectedActivity || isCurrentTabConfirmed"
        >
          手动添加
        </el-button>
        <el-upload
            :show-file-list="false"
            :disabled="!selectedActivity || isCurrentTabConfirmed"
            :on-success="handleBatchImport"
            accept=".xlsx, .xls"
            action=""
            :auto-upload="false"
            ref="upload"
        >
          <el-button
              type="info"
              icon="el-icon-upload"
          >
            批量导入
          </el-button>
        </el-upload>
        <el-button
            type="warning"
            icon="el-icon-delete"
            @click="batchDeleteJudges"
            :disabled="!selectedActivity || isCurrentTabConfirmed || !hasSelectedJudges"
        >
          批量删除
        </el-button>
        <el-button
            type="danger"
            icon="el-icon-key"
            @click="confirmJudgesAndGeneratePassword"
            :disabled="!selectedActivity || isCurrentTabConfirmed || currentTabJudges.length === 0"
        >
          确认评委名单并生成密码
        </el-button>
      </div>

      <!-- 评委列表 -->
      <div :class="{ 'confirmed-list': isCurrentTabConfirmed }">
        <el-table
            :data="currentTabJudges"
            border
            style="width: 100%;"
            v-loading="loading"
            element-loading-text="正在加载评委数据..."
            @selection-change="handleSelectionChange"
        >
          <el-table-column
              type="selection"
              width="55"
          ></el-table-column>
          <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
          ></el-table-column>
          <el-table-column
              prop="activityName"
              label="评审活动"
          ></el-table-column>
          <el-table-column
              prop="expertName"
              label="评委姓名"
          ></el-table-column>
          <el-table-column
              prop="category"
              label="专家类别"
          >
            <template slot-scope="scope">
              <el-tag :type="getCategoryTagType(scope.row.category)">
                {{ scope.row.category }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
              prop="password"
              label="登录密码"
          >
            <template slot-scope="scope">
              <span v-if="!scope.row.showPassword">******</span>
              <span v-else>{{ scope.row.password }}</span>
              <el-button
                  type="text"
                  size="mini"
                  @click="togglePasswordVisibility(scope.row)"
                  :disabled="!scope.row.password"
              >
                {{ scope.row.showPassword ? '隐藏' : '显示' }}
              </el-button>
            </template>
          </el-table-column>
          <el-table-column
              prop="confirmTime"
              label="确认时间"
          ></el-table-column>
          <el-table-column
              label="操作"
              width="220"
          >
            <template slot-scope="scope">
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-view"
                  @click="viewJudgeDetails(scope.row)"
              >
                详情
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-refresh"
                  @click="resetJudgePassword(scope.row)"
                  :disabled="!scope.row.password"
              >
                重置密码
              </el-button>
              <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  style="color: #ff4d4f;"
                  @click="removeJudge(scope.row)"
                  :disabled="isCurrentTabConfirmed"
              >
                移除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 空状态提示 -->
        <div v-if="!loading && currentTabJudges.length === 0" class="empty-state">
          <el-empty
              description="暂无评委数据"
              :image="elEmptyImage"
          >
            <el-button type="primary" @click="openRecommendDialog" :disabled="!selectedActivity">
              去推荐评委
            </el-button>
          </el-empty>
        </div>

        <!-- 已确认提示 -->
        <div v-if="isCurrentTabConfirmed && currentTabJudges.length > 0" class="confirmed-badge">
          <el-tag type="success" icon="el-icon-check-circle">
            评委名单已确认，不可修改
          </el-tag>
        </div>

        <!-- 分页 -->
        <el-pagination
            v-if="currentTabJudges.length > 0"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="currentTabJudges.length"
            style="margin-top: 15px; text-align: right;"
        ></el-pagination>
      </div>
    </div>

    <!-- 评委推荐对话框 -->
    <el-dialog
        title="随机推荐评委"
        :visible.sync="showRecommendDialog"
        width="600px"
        top="10%"
    >
      <el-form label-width="120px">
        <el-form-item label="当前评审活动">
          <el-input
              :value="getSelectedActivityName()"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="当前专业组">
          <el-input
              :value="activeTab"
              disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="推荐评委数量">
          <el-input v-model="judgeCount" type="number" min="1"></el-input>
        </el-form-item>

        <el-form-item label="专家类别比例设置">
          <el-row :gutter="10">
            <el-col :span="12">
              <div style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                  <span>公司领导</span>
                  <span>{{ companyLeaderRatio }}%</span>
                </div>
                <el-slider
                    v-model="companyLeaderRatio"
                    :min="0"
                    :max="100"
                    @input="updateTotalRatio"
                    :disabled="isCalculating"
                ></el-slider>
              </div>

              <div style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                  <span>公司副总及专家</span>
                  <span>{{ viceLeaderRatio }}%</span>
                </div>
                <el-slider
                    v-model="viceLeaderRatio"
                    :min="0"
                    :max="100"
                    @input="updateTotalRatio"
                    :disabled="isCalculating"
                ></el-slider>
              </div>
            </el-col>

            <el-col :span="12">
              <div style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                  <span>科研单位</span>
                  <span>{{ researchRatio }}%</span>
                </div>
                <el-slider
                    v-model="researchRatio"
                    :min="0"
                    :max="100"
                    @input="updateTotalRatio"
                    :disabled="isCalculating"
                ></el-slider>
              </div>

              <div style="margin-bottom: 15px;">
                <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                  <span>二级单位</span>
                  <span>{{ secondaryUnitRatio }}%</span>
                </div>
                <el-slider
                    v-model="secondaryUnitRatio"
                    :min="0"
                    :max="100"
                    @input="updateTotalRatio"
                    :disabled="isCalculating"
                ></el-slider>
              </div>
            </el-col>
          </el-row>

          <div style="text-align: right; margin-top: 10px;">
            <el-tag :type="totalRatio === 100 ? 'success' : 'warning'">
              总比例: {{ totalRatio }}%
            </el-tag>
          </div>
        </el-form-item>
      </el-form>

      <div slot="footer">
        <el-button @click="showRecommendDialog = false" :disabled="isCalculating">取消</el-button>
        <el-button
            type="primary"
            @click="confirmRecommendJudges"
            :disabled="totalRatio !== 100 || !judgeCount || isCalculating"
        >
          <i v-if="isCalculating" class="el-icon-loading"></i>
          随机推荐评委
        </el-button>
      </div>
    </el-dialog>

    <!-- 评委详情弹窗 -->
    <el-dialog
        title="评委详情"
        :visible.sync="showJudgeDetailDialog"
        width="500px"
        top="15%"
    >
      <el-descriptions column="1" border>
        <el-descriptions-item label="评审活动">{{ currentJudge.activityName }}</el-descriptions-item>
        <el-descriptions-item label="专业组">{{ currentJudge.specialty }}</el-descriptions-item>
        <el-descriptions-item label="评委姓名">{{ currentJudge.expertName }}</el-descriptions-item>
        <el-descriptions-item label="专家类别">{{ currentJudge.category }}</el-descriptions-item>
        <el-descriptions-item label="登录密码">{{ currentJudge.password || '未生成' }}</el-descriptions-item>
        <el-descriptions-item label="确认时间">{{ currentJudge.confirmTime || '未确认' }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
            isCurrentTabConfirmed ? '已确认' : '待确认'
          }}
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

    <!-- 移除评委确认弹窗 -->
    <el-dialog
        title="确认移除"
        :visible.sync="showRemoveConfirmDialog"
        width="300px"
        top="30%"
        :show-close="false"
    >
      <div style="text-align: center; padding: 20px 0;">
        <i class="el-icon-warning" style="color: #faad14; font-size: 24px; margin-right: 10px;"></i>
        <span>确定要移除【{{ currentJudge.expertName }}】吗？</span>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button @click="showRemoveConfirmDialog = false">取消</el-button>
        <el-button type="danger" @click="confirmRemove">确定移除</el-button>
      </div>
    </el-dialog>

    <!-- 批量删除确认弹窗 -->
    <el-dialog
        title="批量删除确认"
        :visible.sync="showBatchRemoveConfirmDialog"
        width="300px"
        top="30%"
        :show-close="false"
    >
      <div style="text-align: center; padding: 20px 0;">
        <i class="el-icon-warning" style="color: #faad14; font-size: 24px; margin-right: 10px;"></i>
        <span>确定要删除选中的 {{ selectedJudges.length }} 位评委吗？</span>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button @click="showBatchRemoveConfirmDialog = false">取消</el-button>
        <el-button type="danger" @click="confirmBatchRemove">确定删除</el-button>
      </div>
    </el-dialog>

    <!-- 确认名单生成密码弹窗 -->
    <el-dialog
        title="确认评委名单"
        :visible.sync="showConfirmJudgesDialog"
        width="400px"
        top="30%"
        :show-close="false"
    >
      <div style="padding: 10px 0;">
        <p>您确定要确认当前【{{ activeTab }}】专业组的评委名单并生成密码吗？</p>
        <p style="color: #ff4d4f; margin-top: 10px;">确认后，名单将被锁定，不可再进行修改操作。</p>
      </div>
      <div slot="footer" style="text-align: center;">
        <el-button @click="showConfirmJudgesDialog = false">取消</el-button>
        <el-button type="danger" @click="finalConfirmJudges">确认并生成密码</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'ReviewerRecommend',
  data() {
    return {
      // 评审活动列表
      reviewActivities: [
        { id: '2024', name: '2024年度油气行业评审活动', disabled: false },
        { id: '2025', name: '2025年度油气行业评审活动', disabled: false },
        { id: '2026', name: '2026年度油气行业评审活动（未开始筹备）', disabled: true }
      ],

      // 选中的评审活动
      selectedActivity: '',

      // 活跃的专业组选项卡
      activeTab: '油气勘探',

      // 评委数据 - 按活动和专业组组织
      judgeData: {
        '2024': {
          '油气勘探': [
            {
              id: 1,
              expertId: 101,
              expertName: '张教授',
              activityId: '2024',
              activityName: '2024年度油气行业评审活动',
              specialty: '油气勘探',
              category: '公司领导',
              password: '',
              confirmTime: '',
              showPassword: false
            },
            {
              id: 2,
              expertId: 102,
              expertName: '刘总',
              activityId: '2024',
              activityName: '2024年度油气行业评审活动',
              specialty: '油气勘探',
              category: '公司领导',
              password: '',
              confirmTime: '',
              showPassword: false
            },
            {
              id: 3,
              expertId: 103,
              expertName: '李工程师',
              activityId: '2024',
              activityName: '2024年度油气行业评审活动',
              specialty: '油气勘探',
              category: '公司副总及专家',
              password: '',
              confirmTime: '',
              showPassword: false
            }
          ],
          '油气藏工程': [],
          '钻采与地面工程': [],
          '信息工程': [
            {
              id: 4,
              expertId: 104,
              expertName: '王博士',
              activityId: '2024',
              activityName: '2024年度油气行业评审活动',
              specialty: '信息工程',
              category: '科研单位',
              password: 'd5e6P9fS',
              confirmTime: '2024-03-16 14:20:00',
              showPassword: false
            },
            {
              id: 5,
              expertId: 105,
              expertName: '赵专家',
              activityId: '2024',
              activityName: '2024年度油气行业评审活动',
              specialty: '信息工程',
              category: '二级单位',
              password: 'e4f7Q8gT',
              confirmTime: '2024-03-16 14:20:00',
              showPassword: false
            }
          ]
        },
        '2025': {
          '油气勘探': [],
          '油气藏工程': [
            {
              id: 6,
              expertId: 106,
              expertName: '孙教授',
              activityId: '2025',
              activityName: '2025年度油气行业评审活动',
              specialty: '油气藏工程',
              category: '科研单位',
              password: '',
              confirmTime: '',
              showPassword: false
            }
          ],
          '钻采与地面工程': [],
          '信息工程': []
        },
        '2026': {
          '油气勘探': [],
          '油气藏工程': [],
          '钻采与地面工程': [],
          '信息工程': []
        }
      },

      // 记录各专业组是否已确认
      confirmedStatus: {
        '2024': {
          '油气勘探': false,
          '油气藏工程': false,
          '钻采与地面工程': false,
          '信息工程': true
        },
        '2025': {
          '油气勘探': false,
          '油气藏工程': false,
          '钻采与地面工程': false,
          '信息工程': false
        },
        '2026': {
          '油气勘探': false,
          '油气藏工程': false,
          '钻采与地面工程': false,
          '信息工程': false
        }
      },

      // 分页相关
      currentPage: 1,
      pageSize: 10,

      // 加载状态
      loading: false,

      // 选中的评委（用于批量操作）
      selectedJudges: [],

      // 弹窗状态
      showRecommendDialog: false,
      showRemoveConfirmDialog: false,
      showBatchRemoveConfirmDialog: false,
      showConfirmJudgesDialog: false,
      showJudgeDetailDialog: false,

      // 当前操作的评委
      currentJudge: {},

      // 推荐评委对话框相关
      judgeCount: 10,
      companyLeaderRatio: 20,
      viceLeaderRatio: 30,
      researchRatio: 25,
      secondaryUnitRatio: 25,
      totalRatio: 100,
      isCalculating: false,

      // 空状态图片
      elEmptyImage: 'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png'
    };
  },

  computed: {
    // 当前选项卡的评委列表
    currentTabJudges() {
      if (!this.selectedActivity) return [];
      return this.judgeData[this.selectedActivity][this.activeTab] || [];
    },

    // 当前选项卡是否已确认
    isCurrentTabConfirmed() {
      if (!this.selectedActivity) return false;
      return this.confirmedStatus[this.selectedActivity][this.activeTab] || false;
    },

    // 是否有选中的评委
    hasSelectedJudges() {
      return this.selectedJudges.length > 0;
    }
  },

  created() {
    // 页面加载时获取评委数据
    this.loadJudgeData();
  },

  methods: {
    // 加载评委数据
    loadJudgeData() {
      this.loading = true;

      // 模拟API请求
      setTimeout(() => {
        // 实际项目中这里会从API获取数据
        this.loading = false;
      }, 800);
    },

    // 处理评审活动变化
    handleActivityChange() {
      // 切换活动时重置分页
      this.currentPage = 1;
      // 重新加载当前活动数据
      this.loadJudgeData();
    },

    // 处理选项卡切换
    handleTabClick() {
      // 切换选项卡时重置分页和选中状态
      this.currentPage = 1;
      this.selectedJudges = [];
    },

    // 打开推荐评委对话框
    openRecommendDialog() {
      // 重置推荐对话框的默认值
      this.judgeCount = 10;
      this.companyLeaderRatio = 20;
      this.viceLeaderRatio = 30;
      this.researchRatio = 25;
      this.secondaryUnitRatio = 25;
      this.updateTotalRatio();
      this.showRecommendDialog = true;
    },

    // 更新总比例
    updateTotalRatio() {
      this.totalRatio = this.companyLeaderRatio + this.viceLeaderRatio +
          this.researchRatio + this.secondaryUnitRatio;
    },

    // 确认推荐评委
    confirmRecommendJudges() {
      this.isCalculating = true;

      // 模拟随机推荐过程
      setTimeout(() => {
        const newJudges = [];
        const baseId = Date.now();
        const categories = [
          { name: '公司领导', count: Math.round(this.judgeCount * this.companyLeaderRatio / 100) },
          { name: '公司副总及专家', count: Math.round(this.judgeCount * this.viceLeaderRatio / 100) },
          { name: '科研单位', count: Math.round(this.judgeCount * this.researchRatio / 100) },
          { name: '二级单位', count: Math.round(this.judgeCount * this.secondaryUnitRatio / 100) }
        ];

        // 调整最后一个类别数量，确保总数正确
        const totalCalculated = categories.reduce((sum, item) => sum + item.count, 0);
        if (totalCalculated !== this.judgeCount) {
          categories[3].count += this.judgeCount - totalCalculated;
        }

        // 生成模拟评委数据
        let idCounter = 1;
        const activityName = this.getSelectedActivityName();
        categories.forEach(category => {
          for (let i = 0; i < category.count; i++) {
            const familyNames = ['张', '王', '李', '赵', '刘', '陈', '杨', '黄', '周', '吴'];
            const givenNames = ['教授', '专家', '高工', '工程师', '博士', '研究员', '主任', '院长'];
            const familyName = familyNames[Math.floor(Math.random() * familyNames.length)];
            const givenName = givenNames[Math.floor(Math.random() * givenNames.length)];

            newJudges.push({
              id: baseId + idCounter++,
              expertId: 200 + baseId % 1000 + i,
              expertName: familyName + givenName,
              activityId: this.selectedActivity,
              activityName: activityName,
              specialty: this.activeTab,
              category: category.name,
              password: '',
              confirmTime: '',
              showPassword: false
            });
          }
        });

        // 添加到当前专业组
        this.judgeData[this.selectedActivity][this.activeTab] = [
          ...this.currentTabJudges,
          ...newJudges
        ];

        this.showRecommendDialog = false;
        this.isCalculating = false;
        this.$message.success(`成功推荐 ${newJudges.length} 位评委`);
      }, 1500);
    },

    // 手动添加评委
    manualAddJudge() {
      const activityName = this.getSelectedActivityName();
      const newJudge = {
        id: Date.now(),
        expertId: 300 + Math.floor(Math.random() * 100),
        expertName: '新增专家',
        activityId: this.selectedActivity,
        activityName: activityName,
        specialty: this.activeTab,
        category: '公司副总及专家',
        password: '',
        confirmTime: '',
        showPassword: false
      };

      this.judgeData[this.selectedActivity][this.activeTab].push(newJudge);
      this.$message.success('手动添加评委成功');
    },

    // 处理批量导入
    handleBatchImport() {
      // 实际项目中这里会处理导入的文件数据
      this.$refs.upload.submit();
      this.$message.success('批量导入功能待实现');
    },

    // 批量删除评委
    batchDeleteJudges() {
      if (this.selectedJudges.length === 0) return;
      this.showBatchRemoveConfirmDialog = true;
    },

    // 确认批量删除
    confirmBatchRemove() {
      const judgeIds = this.selectedJudges.map(judge => judge.id);
      this.judgeData[this.selectedActivity][this.activeTab] =
          this.currentTabJudges.filter(judge => !judgeIds.includes(judge.id));

      this.selectedJudges = [];
      this.showBatchRemoveConfirmDialog = false;
      this.$message.success(`已删除选中的 ${judgeIds.length} 位评委`);
    },

    // 确认评委名单并生成密码
    confirmJudgesAndGeneratePassword() {
      this.showConfirmJudgesDialog = true;
    },

    // 最终确认评委名单并生成密码
    finalConfirmJudges() {
      // 生成密码并更新确认时间
      const now = new Date().toLocaleString();
      this.judgeData[this.selectedActivity][this.activeTab] =
          this.currentTabJudges.map(judge => ({
            ...judge,
            password: judge.password || this.generateRandomPassword(),
            confirmTime: now
          }));

      // 更新确认状态
      this.confirmedStatus[this.selectedActivity][this.activeTab] = true;

      this.showConfirmJudgesDialog = false;
      this.$message.success('评委名单已确认，密码已生成');
    },

    // 生成随机密码
    generateRandomPassword() {
      const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
      let password = '';
      for (let i = 0; i < 8; i++) {
        password += chars.charAt(Math.floor(Math.random() * chars.length));
      }
      return password;
    },

    // 切换密码可见性
    togglePasswordVisibility(row) {
      row.showPassword = !row.showPassword;
    },

    // 查看评委详情
    viewJudgeDetails(row) {
      this.currentJudge = {...row};
      this.showJudgeDetailDialog = true;
    },

    // 重置评委密码
    resetJudgePassword(row) {
      this.$confirm(`确定要重置【${row.expertName}】的密码吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 生成新密码
        const newPassword = this.generateRandomPassword();
        // 更新密码
        const index = this.currentTabJudges.findIndex(item => item.id === row.id);
        if (index !== -1) {
          this.currentTabJudges[index].password = newPassword;
        }
        this.$message.success('密码已重置');
      }).catch(() => {
        // 取消操作
      });
    },

    // 移除评委
    removeJudge(row) {
      this.currentJudge = {...row};
      this.showRemoveConfirmDialog = true;
    },

    // 确认移除评委
    confirmRemove() {
      this.judgeData[this.selectedActivity][this.activeTab] =
          this.currentTabJudges.filter(judge => judge.id !== this.currentJudge.id);

      this.showRemoveConfirmDialog = false;
      this.$message.success(`已移除评委【${this.currentJudge.expertName}】`);
    },

    // 处理表格选择变化
    handleSelectionChange(selection) {
      this.selectedJudges = selection;
    },

    // 分页相关方法
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },

    // 获取专家类别标签类型
    getCategoryTagType(category) {
      const typeMap = {
        '公司领导': 'primary',
        '公司副总及专家': 'success',
        '科研单位': 'info',
        '二级单位': 'warning'
      };
      return typeMap[category] || 'info';
    },

    // 获取选中的活动名称
    getSelectedActivityName() {
      const activity = this.reviewActivities.find(a => a.id === this.selectedActivity);
      return activity ? activity.name : '';
    }
  }
};
</script>

<style scoped>

.specialty-tabs {
  margin-bottom: 15px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

/* 已确认状态下的按钮样式 */
.disabled-buttons .el-button:not(.is-disabled) {
  opacity: 0.7;
  cursor: not-allowed;
}

.judge-list-container {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  padding: 15px;
  position: relative;
}

/* 已确认状态下的列表样式 */
.confirmed-list {
  border: 1px solid #e6f7ed;
  background-color: #f6ffed;
}

.empty-state {
  padding: 40px 0;
  text-align: center;
}

.confirmed-badge {
  position: absolute;
  top: 15px;
  right: 15px;
}

/* 批量导入按钮样式调整 */
::v-deep .action-buttons .el-upload {
  display: inline-block;
}
</style>
